<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>选取坐标经纬度</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=53ab133fb528b1d2ca21e42d81bf1871&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        #myPageTop{position:absolute;top:1rem;right:1rem;width:15rem;background-color:#fff;background-clip:border-box;
            border:none;border-radius:.4rem;box-shadow:0 2px 6px 0 rgba(114, 124, 245, .5);margin:0;padding:.75rem;font-size:14px}
        #myPageTop table{width:100%;border-spacing:0}
        .input-card{display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;
            background-clip:border-box;width:15rem;border-width:0;border-radius:.4rem;padding:.75rem;position:fixed;
            box-shadow:0 2px 6px 0 rgba(114, 124, 245, .5);bottom:1rem;right:1rem;-ms-flex:1 1 auto;flex:1 1 auto;}
        .input-card h4{font-size:14px;margin:0;padding:0;}
        .input-item{display: flex; justify-content: space-between;}
    </style>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table cellpadding="0" cellspacing="0">
        <tr><td>请输入关键字：</td></tr>
        <tr><td><input id="tipinput" autocomplete="off" style="width:98%;"/></td></tr>
    </table>
</div>
<div class="input-card">
    <h4>点击地图获取坐标：</h4>
    <div class="input-item">
        <input type="text" readonly="true" id="lnglat">
        <input type="button" value="确定选取" style="cursor:pointer;" onclick="okSel();">
    </div>
</div>
<script type="text/javascript">
    var mark;
    {if $lng && $lat}
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [{$lng}, {$lat}],
        zoom: 17,
    });
    mark = addMarker([{$lng}, {$lat}]);
    {else/}
    var map = new AMap.Map("container", {
        resizeEnable: true,
    });
    map.setCity('{$city}');
    {/if}
    map.on('click', function(e) {
        if (mark) map.remove(mark);
        mark = addMarker(e.lnglat);
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
    //输入提示
    var autoOptions = {input: "tipinput"};
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({map: map});//构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);//关键字查询
    }

    function okSel() {
        var point = document.getElementById("lnglat").value;
        if (point) {
            var arr = point.split(',');
            parent.document.getElementById("c-point").value = point;
            parent.document.getElementById("c-lng").value = arr[0];
            parent.document.getElementById("c-lat").value = arr[1];
            parent.Layer.closeAll();
        }
    }

    function addMarker(lnglat) {
        var marker = new AMap.Marker({
            icon: "/assets/img/site/mark.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }
</script>
</body>
</html>